<!--
 * @FileDescription 定义表
 * @Author 杨宇翔
 * @Date 20220610 15:33:58
 * @LastEditors 杨宇翔
 * @LastEditTime 20220610 15:33:58
-->
<template>
    <table v-show="graphs.length > 0">
        <thead>
            <tr>
                <th></th>
                <th v-for="index of 8" :key="index">{{ 8 - index }}</th>
            </tr>
        </thead>
        <tbody>
            <template v-for="(graph, index) of graphs" :key="graph.Id">
                <tr v-if="index % 8 == 0">
                    <th>{{ index / 8 }}</th>
                    <td v-for="i in 8" :key="graphs[i - 1 + index].Id"
                        :style="{ backgroundColor: graphs[i - 1 + index].Color }">
                        <span :title="graphs[i - 1 + index].Name">
                            {{
                                    graphs[i - 1 + index].Name
                            }}
                        </span>
                        <span>
                            {{
                                    ProtocolComponent.Default.CalculateBit(graphs[i - 1 + index].Index)
                            }}
                        </span>
                    </td>
                </tr>
            </template>
        </tbody>
    </table>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { ProtocolComponent } from './BinocularCameraComponent';

const graphs = computed(() => ProtocolComponent.Default.GraphConfigs.filter(config => config.Type == ProtocolComponent.Default.DataType.value));

</script>

<style scoped>
table {
    margin-left: 4rem;
    margin-right: 4rem;

    border-collapse: collapse;
    border-spacing: 0;
}

th,
td {
    position: relative;

    width: 12.5rem;
    height: 4.5rem;

    border: solid 0.1rem #202027;
}

th {
    color: #B1B1D4;
    font-size: 1.6rem;
    font-weight: 500;

    text-align: center;
}

td>span:first-of-type {
    position: absolute;
    left: 0.5rem;
    bottom: 0.3rem;

    max-width: 80%;

    color: black;
    font-size: 0.8rem;
    font-weight: 500;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

td>span:last-of-type {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    color: white;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.6rem;
}
</style>